<template>
  <div id="app">
    <!-- 导航 -->
    <TopBar :key="topBarKey" />
    <!-- 头部 -->
    <Header />
    <!-- 中间的部分 -->
    <!-- details触发的自定义事件，在这个事件中去修改topBarKey的值 -->
    <router-view @updateTopBarKey="updateTopBarKey" />
    <!-- 底部 -->
    <Footer />
    <Login v-show="isShowLoginModal" />

    <transition name="slide">
      <Toast v-show="isShowToast" />
    </transition>
  </div>
</template>


<script>
import TopBar from "./components/TopBar.vue";
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
import Login from "./components/Login.vue";
import Toast from "./components/Toast.vue";

// 导入axios 一个基于promise的网络请求库，作用于node.js和浏览器中
// import axios from "axios";

// 使用封装的request的axios来请求
// import axios from "./request/request";

// 使用封装过接口地址的API
import { recommendAPI } from "./request/api";

// 使用辅助函数来获取vuex仓库数据  数据配合的是computed
import { mapState } from "vuex";

export default {
  components: {
    TopBar,
    Header,
    Footer,
    Login,
    Toast,
  },
  data() {
    return {
      topBarKey: 0,
    };
  },
  computed: {
    ...mapState({
      // 属性:state=>state.模块名称.属性名
      isShowLoginModal: (state) => state.showModal.isShowLoginModal,
      isShowToast: (state) => state.showToast.isShowToast,
    }),
  },
  // 使用axios发送请求
  /* 缺点: 
          例如.get("http://192.168.113.249:8081/cms/products/recommend"，[token])
          1.url地址其实是固定的，每个组件使用都会重复这段代码     解决方法---在request.js文件封装url地址
          2.一旦接口地址发生改变，所有调用了接口的组件里面都需要做修改    解决方法---在api.js文件统一管理接口地址
          3.如果请求是需要token，那么就需要手动编写config携带token，那么会多个组件携带重复代码    解决方法---reject.js文件中添加拦截器，请求拦截器上设置token
          4.使用.then的写法有可能再次回到回调地狱    解决方法---用async+await来代替
  */

  // 使用.then
  /*   created() {
    // 使用封装后的axios，前面的url地址可以省略了，现在的是接口地址了
    // axios.get("/products/recommend")
    // 封装了接口地址后 API后面要()，是因为我们封装的API是方法
    recommendAPI().then((res) => {
      console.log("res:", res);
    });
  },
}; */
  // 使用async+await  async是用来定义异步函数的，也就是后面的是异步的代码，await就是需要等待当前代码执行再执行后面的代码，也就是.then里面的代码
  created() {
    // 获取配置文件中的属性:process.env.属性名
    // console.log("项目配置环境是", process.env.VUE_APP_MY_TEXT);
  },

  // TopBar重载
  watch: {
    "$route.path": {
      handler(newVal, odlVal) {
        if (newVal != odlVal) {
          // 当路由切换时，改变自定义的topBarKey的值，这个值一改变，就会触发重载
          this.topBarKey++;
        }
      },
    },
  },
  methods: {
    updateTopBarKey() {
      this.topBarKey++;
    },
  },
};
</script>

<style lang="less">
#app {
}

.slide-enter,
.slide-leave-to {
  opacity: 0;
}
.slide-enter-active,
.slide-leave-active {
  transition: opacity 0.3s linear;
}
.slide-leave,
.slide-enter-to {
  opacity: 0;
}
</style>
